<template>
  <view>
    <view class="top_info u-flex" @click="shopShow = true">
      <view class="allshop u-flex">
        <image v-if="isIcon" src="/static/images/Frame.png" class="allshop-img"></image>
        <view>{{shops_name}}</view>
      </view>
      <view v-if="isIcon" class="allshopright">
        <u-icon name="play-right-fill" size="24" color="#333"></u-icon>
      </view>
    </view>
    <u-popup v-model="shopShow" mode="bottom" border-radius="30" height="65%" closeable>
      <view class="pop">
        <view class="pop-content">
          <view class="pop-head">
            <!--标题-->
            <view class="pop-title"><text>选择店铺</text></view>
            <!--搜索-->
            <view class="pop-search">
              <view @click="changeSearchFun" class="search-button">搜 索</view>
              <u-search v-model="shopSearchVal" placeholder="请输入店铺关键字" :show-action="false"  height="74" bgColor="#F6F6F6" color="#888888" :clearabled="false"></u-search>
            </view>
          </view>
          <view class="pop-list">
           <scroll-view class="u-scroll-view" scroll-y="true" style="height: 100%">
             <view class="pop-item" v-for="(item, index) in shopComData" :key="index" >
               <radio-group @click="change(item, item.id)">
                 <label class="uni-list-cell uni-list-cell-pd u-flex pop-between" >
                   <view class="pop-item-left">
                     <view class="pop-item-left-text" :style="{color: item.id === current ? '#FF7A00' : '#333'}">{{item.name}}</view>
                   </view>
                   <view class="pop-item-right">
                     <u-icon v-if="item.id === current" name="checkmark-circle-fill" color="#FF7A00" size="48"></u-icon>
                     <text v-else class="checkIcon"></text>
                   </view>
                 </label>
               </radio-group>
             </view>
             <!--底部按钮高度-->
             <view style="height: 160rpx;"></view>
          </scroll-view>
          </view>
        </view>
        <view class="pop-button">
          <view class="pop-button-box">
            <button @click="cancelFun" class="submit-btn form-btn-cancel" size="mini">取消</button>
            <button @click="submitFun" class="submit-btn form-btn-sumbit" size="mini">确认</button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  name: "shop-list-pop",
  props: {
    AllShopsList: {
      type: Array,
      default: []
    },
    firstShop:  {
      type: String,
      default: ''
    },
    isIcon: {
      type: Boolean,
      default: false
    },
    shopCurrent: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      shops_name: '', //店铺名称
      shopShow: false, //店铺列表弹窗
      shopVal: '', // 选中的店铺
      current: null, //选中状态
      shopSearchVal: '', // 搜索关键字
      shopSearchList: [],//店铺搜索列表
      shopComData: [], // 所有店铺列表
    }
  },
  mounted() {
    console.log('店铺数据=', this.firstShop)
    // 判断是否存在店铺ID
    let shopItem = uni.getStorageSync('shopItem')
    if(shopItem){
      this.shops_name = shopItem.name
    }
    this.shopComData = this.AllShopsList;
    console.log('店铺列表=', this.shopComData)
  },
  methods: {
  // 商家列表选中
    change(res,itemId) {
      this.AllShopsList.forEach((item) => {
        if (item.id === itemId) {
          this.current = item.id
        }
      })
      this.shopVal = res
    },
    // 商家确认切换
    submitFun(){
      this.shopShow = false
      this.current = null
      this.shops_name = this.shopVal.name
      let shop_id = this.shopVal.id
      let shopItem = this.shopVal
      // console.log("选中的商家===",this.shops_name)
      // 缓存本地店铺名称
      uni.setStorageSync('shopItem', shopItem)
      this.$emit('changeShop', shopItem)
    },
    // 收起商家弹窗
    cancelFun(){
      this.shopShow = false
      this.current = null
    },
    // 店铺切换弹窗搜索
    changeSearchFun() {
      let that = this
      // 提示输入店铺
      if(that.shopSearchVal == ''){
        /* uni.showToast({
          title: '请输入店铺名称',
          icon: 'none'
        }) */
        that.shopComData = that.AllShopsList
      }
      // 搜索店铺
      this.shopSearchList = this.AllShopsList.filter(item => {
        return item.name.toLowerCase().includes(that.shopSearchVal.toLowerCase());
      });
      // 先清空搜索列表
      that.shopComData = []
      // 再添加搜索列表
      that.shopSearchList.forEach((item) => {
        this.shopComData.push(item)
      })
      console.log('搜索列表==', that.shopComData)
    },
  },




}
</script>
<style lang="scss">

.allshop {
  .allshop-img {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }
}

.allshopright {
  margin-left: 10rpx;
}


//商店弹窗css
.pop{
  height: 100%;
  overflow-y: hidden;
}
.pop-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .pop-head {
    height: 216rpx;
    box-shadow: 0 0 10rpx 0 rgba(0,0,0,0.1);
    .pop-title {
      padding: 30rpx 30rpx 10rpx 30rpx;
      line-height: 80rpx;
      text-align: center;
      text {
        font-size: 32rpx;
        color: #333;
      }
    }
    .pop-search {
      width: 100%;
      padding: 10rpx 40rpx;
      position: relative;
      z-index: 2;
      justify-content: space-between;
      .search-button {
        width: 100rpx;
        padding: 10rpx 0;
        color: #3D3D3D;
        font-size: 28rpx;
        text-align: center;
        border-left: 1px solid #C1C1C1;
        position: absolute;
        right: 50rpx;
        top: 20rpx;
        z-index: 10;
        transition: all 1s ease;
      }
    }
  }
  .pop-list{
    flex: 1;
    height: 0;
    padding: 30rpx;
    .pop-item {
      width: 100%;
      padding: 20rpx 20rpx 20rpx 0;
      justify-content: space-between;
      .pop-between{
        justify-content: space-between;
        .pop-item-left {
          .pop-item-left-text {
            font-size: 28rpx;
            color: #FF7A00;
          }
        }
        .pop-item-right {

          .checkIcon {
            width: 40rpx;
            height: 40rpx;
            line-height: 40rpx;
            border-radius: 50%;
            border: 1px solid #999;
            display: block;
          }

        }
      }

    }
  }
}
.pop-button {
  height: 160rpx;
  box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
  background: #FFFFFF;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
  .pop-button-box{
    height: 120rpx;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
  }
  .submit-btn {
    flex: 1; /* 让按钮等宽 */
    margin: 0 5px; /* 添加一些外边距 */
    border: none;
    border-radius: 50rpx;
    padding: 10rpx;
  }
  .form-btn-cancel {
    background: #FFFFFF;
    border: 2rpx solid #D2D2D2;
  }

  .form-btn-cancel:after {
    border: none;
  }

  .form-btn-cancel:active {
    background: #F6F6F6;
    border: 2rpx solid #D2D2D2;
  }

  .form-btn-sumbit {
    color: #FFFFFF;
    background: #FFA853;
  }

  .form-btn-sumbit:after {
    border: none;
  }

  .form-btn-sumbit:active {
    color: #FFFFFF;
    background: #FF7900;
  }
}
</style>